<!DOCTYPE html>
<html>

<head>
  <title>视频录制完成</title>
  <style>
    body {
      margin: 0;
    }

    canvas {
      background: block;
      display: block;
      position: relative;
      /* 确保canvas有定位属性 */
      z-index: 1;
      /* 可以不设置，这里只是为了演示 */
    }

    .container {
      width: 100%;
      height: 100%;
      --color: #E1E1E1;
      background-color: #F3F3F3;
      position: relative;
    }

    .modal {
      width: 600px;
      height: 400px;
      display: block;
      margin: 50% 0 0 -300px;
      position: fixed;
      /* 或 absolute，根据需求选择 */
      top: 0;
      left: 80%;
      transform: translate(-50%, -50%);
      background: #fff;
      opacity: 1;
      /* 确保.modal有定位属性 */
      z-index: 99;
    }

    .modal-wrapper.open .modal {
      margin-top: -200px;
      opacity: 1;
    }

    .head {
      width: 90%;
      height: 32px;
      padding: 12px 30px;
      overflow: hidden;
      background: #e2525c;
    }

    .btn-close {
      font-size: 28px;
      display: block;
      float: right;
      color: #fff;
    }

    .content {
      padding: 10%;
    }

    .good-job {
      text-align: center;
      font-family: 'Montserrat', Arial, Helvetica, sans-serif;
      color: #e2525c;
    }

    .good-job .fa-thumbs-o-up {
      font-size: 60px;
    }

    .good-job h1 {
      font-size: 45px;
    }
  </style>
</head>

<body>
  <div class="container">
    <canvas id="c"></canvas>
    <div class="modal">
      <div class="head">
      </div>
      <div class="content">
        <div class="good-job">
          <h1 id="h1txt">视频上传成功</h1>
        </div>
      </div>
    </div>
  </div>
  <script>
    (function () {
      var c = document.getElementById("c"),
        ctx = c.getContext("2d");
      c.width = innerWidth;
      c.height = innerHeight;
      var lines = [],
        maxSpeed = 5,
        spacing = 5,
        xSpacing = 0,
        n = innerWidth / spacing,
        colors = ["#3B8686", "#79BD9A", "#A8DBA8", "#0B486B"],
        i;

      for (i = 0; i < n; i++) {
        xSpacing += spacing;
        lines.push({
          x: xSpacing,
          y: Math.round(Math.random() * c.height),
          width: 2,
          height: Math.round(Math.random() * (innerHeight / 10)),
          speed: Math.random() * maxSpeed + 1,
          color: colors[Math.floor(Math.random() * colors.length)]
        });
      }

      function draw () {
        var i;
        ctx.clearRect(0, 0, c.width, c.height);

        for (i = 0; i < n; i++) {
          ctx.fillStyle = lines[i].color;
          ctx.fillRect(lines[i].x, lines[i].y, lines[i].width, lines[i].height);
          lines[i].y += lines[i].speed;

          if (lines[i].y > c.height)
            lines[i].y = 0 - lines[i].height;
        }

        requestAnimationFrame(draw);

      }
      draw();

    }());

    let intervalId; // 把intervalId声明提升到外层作用域
    // 由于init已经被定义为接收dingtalkUserId的函数，我们不能再使用它作为变量名，所以我将原来的init函数改名为fetchData
    async function fetchData () {
      const signRecordId = "{{ signRecordId }}";
      console.log('111', signRecordId)
      const response = await fetch(`https://api.zjcxjc.cn/api/v1/digital-sign/get-sign-status?signRecordId=${signRecordId}`, {
        method: 'GET'
      });
      const { data, code } = await response.json();
      if (code === 200) {
        console.log('data', data)
        if (data === 'SIGNED' || data === 'FAILED') {
          clearInterval(intervalId); // 如果返回的数据不是pending，则停止调用
          if (data === 'SIGNED') {
            document.getElementById('h1txt').innerText = '报告签署成功！'
            console.log('成功');
          }
          if (data === 'FAILED') {
            document.getElementById('h1txt').innerText = '报告签署失败！'
            console.log('失败');
          }
        } else {
          console.log('正在进行人脸识别');
        }
      }
    }
    const params = new URLSearchParams(window.location.search);
    const init = params.get('init');
    const register = params.get('register');
    console.log('register', register)
    // alert(typeof init, init)
    if (init === '1') {
      if (register === '1') {
        document.getElementById('h1txt').innerText = '已注册成功，请勿重复上传'
      } else {
        document.getElementById('h1txt').innerText = '已签署成功，请勿重复上传'
      }
    } else {
      document.getElementById('h1txt').innerText = '正在签署中，请等待。。。'
      intervalId = setInterval(function () {
        fetchData();
      }, 5000); // 每隔5秒调用一次
      // 立即调用一次，不用等待首次5秒
      fetchData();
    }
  </script>
</body>

</html>